<template>
	<basic-container>
    <el-form  :model="form" ref="form"  label-width="150px"  class="demo-form-inline">
      <el-form-item label="记佣类型"  prop="roomType" :rules="[{required: true,message: '请选择'}]">
      	<el-radio-group v-model="form.roomType" @change="updateByid()">
      		<el-radio label="1">房类记佣</el-radio>
      		<el-radio label="0">固定记佣</el-radio>
      	</el-radio-group>
      </el-form-item>
      <el-form-item label="佣金单位" prop="dw" v-if="form.roomType==0" :rules="[{required: true,message: '请输入'}]">
      	<el-select v-model="form.dw"  placeholder="请选择" @change="updateByid()">
      	      <el-option
      	        v-for="item in options"
      	        :key="item.value"
      	        :label="item.label"
      	        :value="item.value">
      	      </el-option>
      	</el-select>
      </el-form-item>
      <el-form-item label="日佣金" prop="dayyj" v-if="form.roomType==0" :rules="[{required: true,message: '请输入'}]">
      	   <el-input type="number" min="0" v-model="form.dayyj" style="width: 22%;" @change="updateByid()"></el-input>
      </el-form-item>

<!--      <el-form-item label="早餐份数" prop="breakfast" :rules="[{required: true,message: '请输入早餐份数'},{min: 0,max:255,message: '请输入早餐份数'}]">
      	<el-input v-model="form.breakfast" placeholder="早餐份数"></el-input>
      </el-form-item>
      <el-form-item label="佣金类型" prop="commissionType" :rules="[{required: true,message: '请选择'}]">
      	<el-select v-model="form.commissionType" placeholder="请选择">
      		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      		</el-option>
      	</el-select>
      </el-form-item> -->
      <el-form-item label="每日记佣" prop="commission" :rules="[{required: true,message: '请输入'}]">
      	<el-radio-group v-model="form.commission" @change="updateByid()">
      		<el-radio label="1">是</el-radio>
      		<el-radio label="0">否</el-radio>
      	</el-radio-group>
      </el-form-item>
      <el-form-item label="使用固定房价折扣" prop="fixedDiscount" :rules="[{required: true,message: '请选择'}]">
      	<el-radio-group v-model="form.fixedDiscount" @change="changkezk(form.fixedDiscount)">
      		<el-radio label="1">是</el-radio>
      		<el-radio label="0">否</el-radio>
      	</el-radio-group>
      </el-form-item>

      <el-form-item label="房价固定折扣" prop="discount"   v-if="form.fixedDiscount==1" :rules="[{required: true,message: '请输入房价固定折扣值'},{min: 0,max:255,message: '请输入房价固定折扣值'}]">
      	<el-input type="number"  @change="changzk(form.discount)" v-model="form.discount" placeholder="房价固定折扣值"   style="width: 20%;"></el-input>
    <span style="font-size: 17px;margin-left: 6px;">%</span>
      </el-form-item>
    </el-form>
		<el-table
		  :data="datalist"
		  border=""
		  v-loading="dataListLoading"
		  style="width: 100%;"
		>
		  <el-table-column prop="name" header-align="center" align="center" label="房间类型"></el-table-column>
		  <el-table-column prop="price" header-align="center" align="center" label="额定房价"></el-table-column>
		  <el-table-column  header-align="center" align="center" label="协议房价">
        <template  slot-scope="scope">
          <el-input type="number" min="0" :disabled="showturn" @change="changexyfj(scope.row,'0')" v-model="scope.row.xymoney"></el-input>
        </template>
      </el-table-column>
      <el-table-column header-align="center" style="width: 200px;" align="center" label="房价折扣"  v-if="form.fixedDiscount==0">
        <template  slot-scope="scope">
          <el-input class="xieyifangjia" type="number" min="0" style="width: 100%;" @change="changexyfj(scope.row,'1')" v-model="scope.row.fjzk" >
             <template slot="append">%</template>
          </el-input>
        </template>
      </el-table-column>
<!-- 		  <el-table-column  header-align="center" align="center" label="协议折扣(%)">
        <template  slot-scope="scope">
          <el-input type="number" min="0"  v-model="scope.row.xyzk"></el-input>
        </template>
      </el-table-column> -->
		<el-table-column header-align="center" align="center" label="月长包房价">
      <template  slot-scope="scope">
        <el-input type="number" min="0" v-model="scope.row.ycbmoney"></el-input>
      </template>
    </el-table-column>
		<el-table-column  header-align="center" align="center" label="早餐份数">
      <template  slot-scope="scope">
        <el-input type="number" min="0" v-model="scope.row.zcnumber"></el-input>
      </template>
    </el-table-column>
		<el-table-column header-align="center" align="center" label="佣金单位" v-if="form.roomType==1">
      <template  slot-scope="scope">
           <el-select v-model="scope.row.dw"  placeholder="请选择">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
           </el-select>
      </template>
    </el-table-column>
		<el-table-column header-align="center" align="center" label="日佣金"  v-if="form.roomType==1">
      <template  slot-scope="scope">
        <el-input type="number" min="0" v-model="scope.row.dayyj"></el-input>
      </template>
    </el-table-column>
		</el-table>

    <div class="el-dialog__footer">
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="cancelReturn">取 消</el-button>
    		<el-button type="primary" @click="save()">保 存</el-button>
    	</div>
    </div>
	</basic-container>
</template>

<script>
	export default {
		name:"addagreedrate",
		props: {
			cancelReturn: {
			  type: Function
			},
			item:{
					type:Object
			},
			mainid:{
				type:String
			}
		},
	  data() {
	    return {
        options: [{
        	value: '0',
        	label: '元'
        }, {
        	value: '1',
        	label: '%'
        }],
        showturn:false,
			datalist:[],
			dataListLoading:false,
      form: {
      	customerJcName: undefined,
      	agreementNo: undefined,
      	id: undefined,
      	agreementId: undefined,
      	type: undefined,
      	name: undefined,
      	khSigning: undefined,
      	bsSigning: undefined,
      	roomNumber: undefined,
      	no: undefined,
      	qyTime: undefined,
      	effective: undefined,
      	discount: undefined,
      	operation: undefined,
      	updateTime: undefined,
      	createUserId: undefined,
      	breakfast: undefined,
      	remake: undefined,
      	roomType: undefined,
      	commission: undefined,
      	money: undefined,
      	commissionInformation: undefined,
      	fixedDiscount: '0',
      	commissionType: undefined,
      	content: undefined,
        dayyj:'',
        dw:'0'
      }
		 }



	  },
	  created() {
        this.form=this.item;
        this.form.dw=this.form.commissionType;
        if(this.form.fixedDiscount==1){
         this.showturn=true;
        }
          this.getinfo();
	    },
	    methods:{
        changkezk(val){
           if(val==1){
             this.showturn=true;
             for(var i=0;i<this.datalist.length;i++){
                 this.datalist[i].xymoney= this.datalist[i].price*this.form.discount/100
             }
           }else{
              this.showturn=false;
             for(var i=0;i<this.datalist.length;i++){
                 this.datalist[i].xymoney= this.datalist[i].price*this.datalist[i].fjzk/100
             }
           }
        },
        changzk(val){

          for(var i=0;i<this.datalist.length;i++){
              this.datalist[i].xymoney= this.datalist[i].price*val/100
          }
          this.updateByid();

        },
        changexyfj(rows,type){

          if(type=='0'){
            rows.fjzk=(rows.xymoney/rows.price)*100
          }else{
            rows.xymoney=rows.price*rows.fjzk/100
          }
          console.log(rows)

        },
        getinfo(){
          this.dataListLoading=true;
          this.$http({
            url: this.$http.adornUrl('/hotel/tagreementpricelist/listByArray'),
            method: 'get',
            params: this.$http.adornParams({
               customerId:this.form.id
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {

              this.datalist =data.page;
              this.dataListLoading=false;

            } else {
                this.datalist =[];
            }
          });
        },
        updateByid(){
          this.$http({
          			url: this.$http.adornUrl(
          				`/hotel/agreement-customer/updateByids`
          			),
          			method: "post",
          			data: this.form
          		}).then(({
          			data
          		}) => {
          			if (data && data.code === 0) {
                  this.save();
          			} else {
          				this.$message.error(data.msg);
          			}
          		});
        },
        save(){
          this.$http({
          	url: this.$http.adornUrl(
          		`/hotel/tagreementpricelist/saveArray`
          	),
          	method: "post",
          	data: this.$http.adornData({
                agreementCustomerEntity: this.form,
                parms: JSON.stringify(this.datalist),
              })
          }).then(({
          	data
          }) => {
          	if (data && data.code === 0) {
          		this.$message({
          			message: "操作成功",
          			type: "success",
          			duration: 1500,
          			onClose: () => {
          				//this.cancelReturn();
          			}
          		});
          	} else {
          		this.$message.error(data.msg);
          	}
          });

        }

		}
	}
</script>

<style lang="scss" scoped>
// 协议房价
.xieyifangjia {
	/deep/ .el-input__inner {
		padding-right: 0;
	}
	/deep/ .el-input-group__append {
		padding: 0 5px;
	}
}
</style>
